<template>
  <div style="width: 100%;height: 100%">
    <vueMiniPlayer v-if="visible" ref="vueMiniPlayer" :video="video" :mutex="true" class="videoPlayer" @fullscreen="handleFullscreen" />
  </div>
</template>

<script>

import Vue from 'vue'
import vueMiniPlayer from 'vue-mini-player'
import 'vue-mini-player/lib/vue-mini-player.css'
Vue.use(vueMiniPlayer)

export default {
  name: 'VideoPlayer',
  props: {
    url: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      video: {
        // 视频播放源
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        url: this.url,
        loop: false, // 视频是否循环播放
        preload: 'auto', // 视频预加载
        poster: '', // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: true // 视频自动播放
      },
      visible: true
    }
  },
  mounted() {
    console.log(url)
  },
  // computed:{
  //   video(){
  //     return this.$refs.vueMiniPlayer.$video;
  //   }
  // },
  methods: {
    handleFullscreen() {

    },
    play(url) {
      console.log('---------------------------------- play: ', url)
      this.video.url = url
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.videoPlayer {
  padding: 0px 0px;
}
</style>
